/*
	Copyright 2018 Google Inc. All Rights Reserved.
	Licensed under the Apache License, Version 2.0 
	(the "License"); you may not use this file 
	except in compliance with the License.
	You may obtain a copy of the License at
	http://www.apache.org/licenses/LICENSE-2.0
	Unless required by applicable law or agreed to 
	in writing, software distributed under the License
	is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
	either express or implied.
	See the License for the specific language governing
	permissions and limitations under the License.
	Licensed under the Apache License, 
	Version 2.0 (the "License");
*/
'use strict';

// get all css styles
var cssStyles = getComputedStyle(document.body);

// init
var textbox = document.querySelector('#textbox');	
var slider = document.querySelector('#slider');


var getStyles = function(value) {
	return cssStyles.getPropertyValue(value).trim();
}

var setStyles = function(property, value) {
	return document.documentElement.style.setProperty(property, value);
}

window.addEventListener('load', function() {

	// Connect CSS number var to the custom property
	var cssNumber = getStyles("--number");
	
	// Connect both the slider and the input box to the custom property
	textbox.value = cssNumber;
	slider.value = cssNumber;


	slider.addEventListener('input', function() {		
		// Set the sliders value to be the root changer
		cssNumber = slider.value;
		textbox.value = slider.value;
		
		// update the CSS style number
		setStyles("--number", cssNumber);
	});

});